//底部最左侧，车辆状态
function echart_1() {
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('vehicle-condition'));

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },

        legend: {
            // align: 'center',
            // left: '65%',
            top: '28',
            data: ['行驶', '停车', '熄火', '离线'],
            itemWidth: 16,
            itemHeight: 12,
            // borderRadius: 0, // 统一设置四个角的圆角大小
            icon: 'rect',
            textStyle: {
                itemGap: 12, //图例每项之间的间隔
                color: [],
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 14,
            }
        },

        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },

        xAxis: {
            axisLabel: { //调整x轴的lable
                textStyle: {
                    color: '#fff',
                    fontSize: 13,
                }
            },
            splitLine: {
                show: false
            }
        },

        yAxis: {
            type: 'category',
            data: ['学生班车', '网约车', '危险品运输车', '客运车'],
            axisTick: { show: true },
            axisLabel: { //调整x轴的lable
                textStyle: {
                    color: '#fff',
                    fontSize: 13,
                }
            },
            splitLine: {
                show: false
            }
        },

        series:
            [
                {
                    name: '行驶',
                    type: 'bar',
                    stack: '总量',
                    color: '#0035f9',
                    barWidth: 18,
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    data: [4, 10, 8, 7]
                },
                {
                    name: '停车',
                    type: 'bar',
                    stack: '总量',
                    color: '#f36f8a',
                    barWidth: 20,
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    data: [10, 4, 5, 6]
                },
                {
                    name: '熄火',
                    type: 'bar',
                    stack: '总量',
                    color: '#efe39b',
                    barWidth: 20,
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    data: [4, 10, 8, 7]
                },
                {
                    name: '离线',
                    type: 'bar',
                    stack: '总量',
                    color: '#25f3e6',
                    barWidth: 20,
                    label: {
                        normal: {
                            show: false,
                            position: 'insideRight'
                        }
                    },
                    data: [4, 10, 8, 7]
                }
            ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
echart_1()
function test2() {
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('status-information'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{b}  <br/>{c}辆"
        },
        legend: {
            x: 'center',
            y: '2%',
            data: ['车型一', '车型二', '车型三', '车型四', '车型五'],
            icon: 'circle',
            textStyle: {
                color: '#fff',
            }
        },
        calculable: true,
        series: [{
            name: '车型',
            type: 'pie',
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [41, 110],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ['50%', '20%'],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: 'area',
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    formatter: '{c}辆'
                },
                emphasis: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length2: 1,
                },
                emphasis: {
                    show: true
                }
            },
            data: [{
                value: 600,
                name: '车型一',
                itemStyle: {
                    normal: {
                        color: '#f845f1'
                    }
                }
            },
            {
                value: 1100,
                name: '车型二',
                itemStyle: {
                    normal: {
                        color: '#ad46f3'
                    }
                }
            },
            {
                value: 1200,
                name: '车型三',
                itemStyle: {
                    normal: {
                        color: '#5045f6'
                    }
                }
            },
            {
                value: 1300,
                name: '车型四',
                itemStyle: {
                    normal: {
                        color: '#4777f5'
                    }
                }
            },
            {
                value: 1400,
                name: '车型五',
                itemStyle: {
                    normal: {
                        color: '#44aff0'
                    }
                }
            },

            {
                value: 0,
                name: "",
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            },
            {
                value: 0,
                name: "",
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
            ]
        }]
    });
}
test2()
function test3() {
    // 初始化echarts实例
    var myChart = echarts.init(document.getElementById('month'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        "legend": {

            "data": [
                { "name": "图例1" },
                { "name": "图例2" },
                { "name": "完成率" }
            ],
            "top": "0%",
            "textStyle": {
                "color": "rgba(255,255,255,0.9)"//图例文字
            }
        },

        "xAxis": [
            {
                "type": "category",

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
                axisLabel: {
                    textStyle: { color: "rgba(255,255,255,1)", fontSize: '14', },
                },

            },
        ],
        "yAxis": [
            {
                "type": "value",
                "name": "金额",
                "min": 0,
                "max": 50,
                "interval": 10,
                "axisLabel": {
                    "show": true,

                },
                axisLine: { lineStyle: { color: 'rgba(255,255,67,.8)' } },//左线色

            },
            {
                "type": "value",
                "name": "完成率",
                "show": true,
                "axisLabel": {
                    "show": true,

                },
                axisLine: { lineStyle: { color: 'rgba(255,255,67,.8)' } },//右线色
                splitLine: { show: true, lineStyle: { color: "#ffffff" } },//x轴线
            },
        ],
        "grid": {
            "top": "10%",
            "right": "30",
            "bottom": "30",
            "left": "30",
        },
        "series": [
            {
                "name": "图例1",

                "type": "bar",
                "data": [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
                "barWidth": "auto",
                "itemStyle": {
                    "normal": {
                        "color": {
                            "type": "linear",
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#609db8"
                                },

                                {
                                    "offset": 1,
                                    "color": "#609db8"
                                }
                            ],
                            "globalCoord": false
                        }
                    }
                }
            },
            {
                "name": "图例2",
                "type": "bar",
                "data": [
                    4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18
                ],
                "barWidth": "auto",

                "itemStyle": {
                    "normal": {
                        "color": {
                            "type": "linear",
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "colorStops": [
                                {
                                    "offset": 0,
                                    "color": "#66b8a7"
                                },
                                {
                                    "offset": 1,
                                    "color": "#66b8a7"
                                }
                            ],
                            "globalCoord": false
                        }
                    }
                },
                "barGap": "0"
            },
            {
                "name": "完成率",
                "type": "line",
                "yAxisIndex": 1,

                "data": [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
                lineStyle: {
                    normal: {
                        width: 2
                    },
                },
                "itemStyle": {
                    "normal": {
                        "color": "#cdba00",

                    }
                },
                "smooth": true
            }
        ]
    })
}
test3()